<template>
  <el-card class="count">
    <el-container>
      <el-header style="height: 30px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ name: 'count' }">统计</el-breadcrumb-item>
          <el-breadcrumb-item>统计列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <div class="box">
          <div class="content-box">
            <div class="left">
              {{ count.bookNumber }}
              <div>
                图书总量
              </div>
            </div>
            <div class="right">
              <img src="../../../assets/img/book.png" alt="">
            </div>
          </div>
          <div class="content-box">
            <div class="left">
              {{ count.borrowNumber }}
              <div>
                借阅总量
              </div>
            </div>
            <div class="right">
              <img src="../../../assets/img/brower.png" alt="">
            </div>
          </div>
          <div class="content-box">
            <div class="left">
              {{ count.lableNumber }}
              <div>
                分类总量
              </div>
            </div>
            <div class="right">
              <img src="../../../assets/img/type.png" alt="">
            </div>
          </div>
          <div class="content-box">
            <div class="left">
              {{ count.userNumber }}
              <div>
                用户总量
              </div>
            </div>
            <div class="right">
              <img src="../../../assets/img/user.png" alt="">
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      count: {},
    };
  },
  methods: {
    async fetchData() {
      const res = await this.$api.getStatisticData();
      this.count = res.data;
    },
  },
  created() {
    this.fetchData();
    const a = null
    if (a.enableNull > 1) { }
  },
};
</script>

<style lang="less" scoped>
.type {
  margin-bottom: 15px;
}

.box {
  display: flex;
}

.content-box {
  width: calc(100vw / 4);
  display: flex;
  padding: 15px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
  border-radius: 5px;
  margin-left: 15px;
  box-shadow: 5px 5px 5px #DCDFE6;
  transition: transform 0.3s ease;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-right: 10px;

  div {
    margin-top: 5px;
    font-size: 12px;
  }
}

img {
  height: 60px;
  width: 60px;
}

.content-box:hover {
  cursor: pointer;
  transform: translate(-5px, -5px);
  transition: transform 0.3s ease;
}
</style>
